<template>
  <div style="height: 100vh; overflow:hidden;  background-image: linear-gradient(135deg,#1352f2,#3c82f5);">
        <el-container style="padding:30px">
          <el-header>
            <el-row>
              <el-col :span="3">
                <img src="/imgs/login/logo.png" style="height: 50px; width: 100%;" >
              </el-col>
              <el-col :span="1">
                <img src="/imgs/login/auto.png" style="height: 50px; width: 100%;">
              </el-col>
              <el-col :span="1">
                <img src="/imgs/login/verticalLine.png" style="height: 50px; width: 100%;">
              </el-col>
              <el-col :span="19">
                <span style="color: #fff;font-size:30px; font-weight: bold">智慧车辆运营管理系统</span>
              </el-col>
            </el-row>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="16">
                <img src="/imgs/login/bg.png"  style="width: 100%" >
              </el-col>
              <el-col :span="8">
                <el-card style="margin-top:80px ">
                  <h3 style="text-align: center">用户登录</h3>
                  <el-form label-position="top" >
                    <el-form-item label="用户名">
                      <el-input v-model="user.username" placeholder="输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                      <el-input v-model="user.password" placeholder="请输入密码" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button  type="primary" style="width: 100%" @click="login">登录</el-button>
                    </el-form-item>

                  </el-form>
                  <div style="text-align: center;color: #666;font-size: 14px;padding: 10px 0;">
                    (体验账号：tom 密码：123456)
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
    </div>
</template>
<script setup>

import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const user=ref({
  username:'',
  password:'',
});
const login=()=>{
  console.log(user.value);
//   1.给后端发请求,需要借助axios工具，注意：axios需要安装和导入！
  axios.post(BASE_URL+'/v1/user/login',user.value)
      .then((response)=>{
        //2.发送请求后，服务器处理完毕会给客户端响应结果，前端需要在回调函数中处理这个响应结果
        // response 是响应对象，我们可以从响应对象response的data中得到后端服务器的响应数据
        console.log(response);
        console.log(response.data);//后端返回的是JsonResult

        console.log(response.data.data);//JasonResult的data，这里是UserVO
      //   根据后端的响应结果做前端处理
        if (response.data.code==2000){
          ElMessage.success('登陆成功!');
          // localStorage只能存字符串类型的键值对
          localStorage.setItem('user',JSON.stringify(response.data.data));

          // 登录成功，跳转到HomeView,再重定向到用户首页
          router.push('/user')
        }else{
          ElMessage.error(response.data.msg);
          // 5.登陆失败，清空输入框
          user.value={username:'',password:'',};
        }
      })
};

</script>


<style scoped>

</style>